<template>
  <t-link
    v-permission="['system:permission:assign-role-menu']"
    theme="primary"
    @click="handleOpenDialog('update', { ...props.row, roleId: props.row.id })"
  >
    菜单权限
  </t-link>
  <!-- 自定义对话框 -->
  <custom-dialog
    ref="customDialogRef"
    v-slot="{ formData }"
    :api-map="{ get: getMenuByRoleId, update: setRoleMenu }"
    header="菜单权限"
    :on-before-set-data="handleDialogSetData"
  >
    <t-form-item label="角色名称" name="name" :rules="[{ required: true, message: '请输入角色名称' }]">
      <t-input v-model:value="formData.name" placeholder="请输入角色名称" clearable readonly />
    </t-form-item>
    <t-form-item label="角色标识" name="code" :rules="[{ required: true, message: '请输入角色标识' }]">
      <t-input v-model:value="formData.code" placeholder="请输入角色标识" clearable readonly />
    </t-form-item>
    <t-form-item label="菜单权限" name="menuIds">
      <div>
        <t-space style="margin: 6px">
          是否全选<t-switch @change="handleChangeMenuChecked" /> 是否展开<t-switch @change="handleChangeMenuExpanded" />
        </t-space>
        <t-tree
          ref="menuTreeRef"
          v-model:value="formData.menuIds"
          :data="simpleMenuTree"
          :keys="{ value: 'id', label: 'name' }"
          checkable
          check-strictly
          @change="handleMenuIdsChange"
        />
      </div>
    </t-form-item>
  </custom-dialog>
</template>

<script setup lang="ts">
import { SwitchValue } from 'tdesign-vue-next';
import { ref, useTemplateRef } from 'vue';

import { getSimpleMenuList } from '@/api/system/menu';
import { getMenuByRoleId, setRoleMenu } from '@/api/system/role';
import CustomDialog from '@/components/custom/dialog/index.vue';
import listToTree from '@/utils/listToTree';

// props
const props = defineProps({
  row: {
    type: Object,
    default: () => ({}),
  },
});
// 精简菜单树
const simpleMenuTree = ref([]);
// 处理获取精简菜单树
const handleGetSimpleMenuTree = () => {
  getSimpleMenuList().then((data) => {
    data.forEach((item: Record<string, any>) => {
      if (item.type === 3) item.name = `【权限】${item.name}`;
    });
    simpleMenuTree.value = listToTree(data);
  });
};
// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>) => {
  handleGetSimpleMenuTree();
  customDialogRef.value.open(mode, params);
};
// 处理对话框设置数据
const handleDialogSetData = (data: number[]) => {
  return {
    menuIds: data,
  };
};
// 菜单树ref
const menuTreeRef = useTemplateRef('menuTreeRef');
// 是否操作菜单
const isOperationMenu = ref(false);
// 处理菜单id改变
const handleMenuIdsChange = (_: any, { node }: any) => {
  if (isOperationMenu.value) return;
  isOperationMenu.value = true;
  const parents = menuTreeRef.value.getParents(node.value);
  parents.forEach((item) => {
    if (!item.checked) {
      menuTreeRef.value.setItem(item.value, { checked: true });
    }
  });
  const items = menuTreeRef.value.getItems(node.value);
  items.forEach((item) => {
    menuTreeRef.value.setItem(item.value, { checked: node.checked });
  });
  isOperationMenu.value = false;
};
// 处理改变菜单选中
const handleChangeMenuChecked = (value: SwitchValue) => {
  if (isOperationMenu.value) return;
  isOperationMenu.value = true;
  const items = menuTreeRef.value.getItems();
  items.forEach((item) => {
    menuTreeRef.value.setItem(item.value, { checked: value as boolean });
  });
  isOperationMenu.value = false;
};
// 处理改变菜单展开
const handleChangeMenuExpanded = (value: SwitchValue) => {
  if (isOperationMenu.value) return;
  isOperationMenu.value = true;
  const items = menuTreeRef.value.getItems();
  items.forEach((item) => {
    menuTreeRef.value.setItem(item.value, { expanded: value as boolean });
  });
  isOperationMenu.value = false;
};
</script>

<style lang="less" scoped></style>
